<template>
    <div id="suggest">
		<!-- main -->
		<div class="main">
			<!-- 选择投诉订单 -->
			<div class="selectOrder">
				<div class="title">选择投诉订单</div>
				<van-radio-group v-model="value_order">
					<div class="order" v-for="(item,index) in list_order" :key="item.uid" @click="toggleOrder(item.uid,index)">
						<li>
							<span class="left">订单编号</span>
							<span class="right">{{item.code}}</span>
						</li>
						<li>
							<span class="left">订单类型</span>
							<span class="right">{{item.orderType|filter_type}}</span>
						</li>
						<li>
							<span class="left">表现师</span>
							<span class="right">{{item.userName}}</span>
						</li>
						<li>
							<span class="left">作图数量</span>
							<span class="right">{{item.photoscount}}</span>
						</li>
						<li>
							<span class="left">发起时间</span>
							<span class="right">{{item.createDate}}</span>
						</li>
						<van-radio :name="item.uid" ref="checkboxes" class="check"></van-radio>
					</div>
				</van-radio-group>
				<div
					class="more"
					@touchstart="moreOrder()"
					v-if="list_order.length == 1 && nList.length>0">
					查看项目组订单({{nList.length}})
				</div>
			</div>
			<!-- 选择投诉原因 -->
			<div class="common obj">
				<h3 class="title">选择投诉原因</h3>
				<van-radio-group v-model="value_reason">
					<div 
						class="item" 
						v-for="(item,index) in list_reason" 
						:key="item.id" 
						@click="toggleReason(item.id,index)">
						<p>{{item.reason}}</p>
						<van-radio :name="item.id" ref="checkboxes"></van-radio>
					</div>
				</van-radio-group>
			</div>
			<!-- 图片上传 -->
			<div class="common upload">
				<h3 class="title">
					<span>图片凭证 (选填)</span>
					<span>{{images.length}}/9</span>
				</h3>
				<ul class="list">
					<li v-for="item in images" :key="item" @click="showPic(item)">
						<img :src="item">
					</li>
					<li @touchstart="uploadImage" v-if="images.length<9">
						<img src="@/assets/img/public/addImg.png">
					</li>
				</ul>
			</div>
			<!-- 投诉内容 -->
			<div class="common upload">
				<h3 class="title">
					<span>投诉内容 (选填)</span>
					<span>{{msg.length}}/200</span>
				</h3>
				<div class="msg">
					<textarea
			            placeholder="详情内容"
			            maxlength="200"
			            v-model="msg"
			            ref="myInput">
			        </textarea>
				</div>
			</div>
			<!-- 提交 -->
			<submit
				title="提交"
				color="#fff"
				bgcolor="#5E8EFE"
				style="margin: 0.2rem 0;"
				@click.native="submit()">
			</submit>
		</div>
		<!-- 预览图片 -->
		<van-image-preview
			v-model="showImages"
			:images="picS">
		</van-image-preview>
    </div>
</template>
<script>
import apiConfig from '@/api/index'
import top from '@/components/title_bar/index.vue'
import submit from '@/components/performance/msgCenter/submit.vue'
import {getuserUid} from '@/utils/auth.js'
import {compressImage,toBase64} from '@/utils/chat.js'
var WV_right = {
	id: 'right',
	tag: 'img',
	src: '',
	position: {top:'11px',right:'18px',width:'20px',height:'20px'},
	sprite: {top:'0px',left:'0px',width:'100%',height:'100%'}
}
var MV_back = {
	id: 'back',
	tag: 'img',
	src: location.protocol === 'http:' ? 'http://192.168.0.111:8080/back.png' : './back.png',
	position: {top:'11px',left:'18px',width:'10px',height:'18px'},
	sprite: {top:'0px',left:'0px',width:'100%',height:'100%'}
}
var MV_title = (name) => {
	return {tag:'font', id:'titlename', text: name, textStyles: { size: '18px', color: '#fff' }}
}
export default {
	components:{
		top,
		submit
	},
    data(){
		return{
			//选择投诉订单
			value_order:"",
			list_order:[], //渲染数组
			nList:[],  //临时数组
			accused:"",  //被投诉人的id

			//投诉原因
			list_reason:[],
			value_reason:"",  //原因id
			chinese_reason:"",  //原因中文

			//图片上传
			images:[],
			files:[],

			//投诉内容
			msg:"",
            value_grade:"",

			//其他
			userId:"",
			WV:"",
			
			//图片预览
			showImages:false,
			picS:[],

			//toast
			toast:"",

            //最小高度
            minHeight:"100%"
		}
	},
    watch:{
        minHeight(val){
            console.log('版本2');
            console.log('minHeight:' + this.minHeight);
        }
    },
	methods:{
		//加载中
		loading:function(msg){
			const toast = this.$toast.loading({
				duration: 0,
				mask: false,
				message: msg,
				forbidClick:true
			});
			return toast;
		},
		//后退
		goBack:function(){
			this.$router.back();
		},
		//显示预览
		showPic:function(url){
			this.picS = [];
			this.picS.push(url);
			this.showImages = true;
		},
		//加载项目组订单
		load_order:function(){
			//////////
			HTTP('order_list',{
				parentOrderUid:this.$route.query.orderId,
			})
			.then(res=>{
				if(res.code == 200){
					console.log(res);
					this.list_order.push({
						uid:res.data.uid,
						orderType:res.data.orderType,
						otiuid:res.data.otiuid,
						role:res.data.role,
						code:res.data.code,
						userName:res.data.userName,
						useruid:res.data.useruid,
						photoscount:res.data.photoscount,
						createDate:res.data.createDate
					})
					//如果有子订单
					if(res.data.child){
						this.nList = res.data.child;
					}
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//查看更多项目组订单
		moreOrder:function(){
			this.nList.map(o=>{
				this.list_order.push(o);
			})
		},
		//加载投诉原因
		load_reason:function(){
			HTTP('suggest_list',{
				parentOrderUid:this.$route.query.orderId,
			})
			.then(res=>{
				if(res.code == 200){
					this.list_reason = res.data;
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//投诉投诉订单单选
		toggleOrder:function(n,index){
			this.value_order = n;
			this.accused = this.list_order[index].useruid;
		},
		//投诉原因
		toggleReason:function(n,index){
			this.value_reason = n;
            this.value_grade = this.list_reason[index].uid;
            console.log(this.value_grade);
            //this.value_grade = this.list_reason[index].seriousnessLevel;
			this.chinese_reason = this.list_reason[index].reason;
		},
		//打开相册
		uploadImage:function(){
			plus.gallery.pick((path)=> {
				if(path){
					// 压缩图片
					compressImage(path)
					.then(res=>{
						// 转base64
						toBase64(res)
						.then(base64=>{
							this.images.push(base64);
						})
					})
					// //转为base64
					// getBase64Image(path,res=>{
					// 	this.images.push(res);
					// });
				}
			},
			{
				filter: "image"
			});
		},
		//提交
		submit:function(){
			if(this.value_order == ''){
				this.$toast('请选择一个订单');
			}
			else if(this.value_reason == ''){
				this.$toast('请选择一个原因');
			}
			else{
				//base info
				this.$refs.myInput.blur();
				this.toast = this.loading('提交中');
				//开始上传
				HTTP('suggest_submit',{
					multipartFiles:this.images,
					byUserUid:this.userId,
					toUserUid:this.accused,
					content:this.msg,
					penaltyUid:this.value_grade,
					orderUid:this.value_order
				})
				.then(res=>{
					if(res.code == 200){
						console.log(res);
						this.toast.clear();
						this.$toast('提交成功');
						//延迟1秒在返回
						setTimeout(()=>{
							this.$router.back();
						},1000)
					}
					else{
						this.$toast(res.msg);
					}
				})
			}
		},
	},
	filters: {
		//订单类型过滤器
		filter_type:function(value){
			let result = value==1?'下单':'改图';
			return result;
		}
	},
	destroyed(){
		window.removeEventListener('resize', this.handleSize, false)
		let run = () => {
			this.WV && this.WV.hide()
			// WV_textarea.hide()
			plus.webview.currentWebview().setStyle({
				softinputMode: "adjustPan"
			})
		}
		;[0, 50, 100, 1001].forEach(e => {
			setTimeout(run, e)
		})
	},
	mounted:function(){
		let CWV = plus.webview.currentWebview()
		let runListenText = false
		CWV.setStyle({
			softinputMode: "adjustResize",
		})
		this.load_order(); //订单列表
		this.load_reason(); //投诉原因
	},
	created:function(){
		this.userId = getuserUid();
		if(window.plus){
			this.WV = new plus.nativeObj.View(
				'chat',
				{
					top: '0px',
					left: '0px',
					height: '44px',
					width: '100%',
					backgroundColor: '#5E8EFE',
					color: '#ffff',
				},
				[MV_back, WV_right, MV_title('投诉建议')]
			)
			this.WV.show()
			this.WV.addEventListener('click', (e) => {
				let lr
				if(e.clientX < (window.innerWidth / 4)){
					lr = 'left'
				}
				if(e.clientX > (window.innerWidth / 4 * 3)){
					lr = 'right'
				}
				// console.log(e, lr)
				if(lr === 'right'){
					this.toDetail()
					return
				}
				if(lr === 'left'){
					this.goBack()
					return
				}
			})
		}
	}
};
</script>
<style lang="scss" scoped>
	#suggest{
		touch-action: manipulation;
		width: 94%;
		margin: .25rem auto;
		position: relative;
		height: 100vh;
		.main{
			min-height: 100vh;
			padding-top: 46px;
			//padding-bottom: 26px;
			overflow: auto;
		}
		.common{
			background-color: #fff;
			border-radius: 4px;
			margin-bottom: 14px;
			.title{
				font-weight: normal;
				color: #666;
				padding: 6px 10px;
				color: #888;
				font-size: $fz-6;
				border-bottom: 1px solid $border-color-base;
			}
		}
		//选择投诉订单
		.selectOrder{
			.title{
				background-color: #fff;
				color: #888;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
				padding: 6px 10px;
				margin-bottom: 8px;
			}
			.order{
				position: relative;
				background-color: #fff;
				padding: 4px 10px;
				margin-bottom: 5px;
				li{
					margin: 5px 0;
					.left{
						display: inline-block;
						color: #888;
						width: 55px;
						text-align: right;
					}
					.right{
						margin-left: 20px;
					}
				}
				.check{
					position: absolute;
					top: 10px;
					right: 15px;
				}
			}
			.order:last-child{
				margin-bottom: 12px;
			}
			.more{
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				color: $color-primary;
				padding: 12px 0;
				margin-bottom: 14px;
				font-size: $fz-5;
			}
		}
		//投诉对象
		.obj{
			.item{
				touch-action: manipulation;
				position: relative;
				display: flex;
				padding: 11px;
				align-items: center;
				justify-content: space-between;
				.name{
					margin-left: 10px;
					color: #666;
				}
			}
			.item:after{
				content: '';
				position: absolute;
				left: 11px;
				right: 11px;
				bottom: 0;
				border-bottom: 1px solid #eee;
			}
			.item:last-child:after{
				border: none;
			}
			p{
				color: #666;
			}
		}
		//图片上传
		.upload{
			.title{
				display: flex;
				justify-content: space-between;
			}
			.list{
				display: flex;
				flex-wrap: wrap;
				padding: 0.1rem;
				li{
					margin: 0.09rem 0.09rem;
					width: 2.1rem;
					height: 2.1rem;
					img{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		//投诉内容
		.msg{
			padding: 0.2rem;
			textarea{
				width: 100%;
				border: none;
				resize: none;
				-webkit-appearance: none;
				-webkit-user-select: text;
			}
		}
	}
	li{
		list-style: none;
	}
</style>
